<template>
	<view>
		<navbar title="办理记录"/>
		<view class="content">
			<view>
				<scroll-view
					:scroll-y="true"
					:upper-threshold="50"
					@scrolltolower="loadMore"
					style="height:100%;"
					v-if="dataSource.length >0"
				>
					<uni-list >
						<uni-list-item v-for="(item,i) in dataSource" :key="i"  style="width: 100%;">
							<template v-slot:body>
								<view>
									<view class="slot-box">
										<text class="slot-text">节点：{{item.name}}</text>
										<text class="slot-text"></text>
										<text class="slot-text">审批意见：{{item.canceled?`${item.comment || '不通过'}`:'通过'}}</text>
									</view>
									<view class="slot-box">
										<text class="slot-note slot-text">{{item.textMap?item.textMap.assignee$DICT_TEXT_:item.assignee}}</text>
										<text class="slot-note slot-text">{{item.endTime}}</text>
									</view>
								</view>
							</template>
						</uni-list-item>
					</uni-list>
				</scroll-view>
				<view  v-else>
					<u-empty mode="data" v-if="!loading" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navbar from '@/components/navbar.vue'
	import { getAction,postAction } from '@/api/manage.js'
	import { CURY_TYPE } from '@/utils/constant.js'
	import listMixins from '@/mixins/listMixins'
	export default {
		mixins:[listMixins],
		components:{ navbar },
		data() {
			return {
				filters:{},
				urlObj:{
					list:'/camunda/task/historics/'
				},
				dataSource:[],
				disableMixinCreated:true,
				loading:false,
				processInstanceId:''
			}
		},
		methods: {
			onClickItem(row){
				
			},
			async loadData(){
				this.loading = true
				try{
					const res = await getAction(this.urlObj.list+this.processInstanceId)
					const data = res.data
					if(data.success){
						this.dataSource = data.result.filter(item => {
							item.endTime =  this.$u.timeFormat(item.endTime, 'yyyy-mm-dd hh:MM:ss')
							return item.activityType === 'userTask'
						})
					}else{
						this.$modal.msgError(data.message)
					}
					this.loading = false
				}catch(e){
					//TODO handle the exception
					this.loading = false
				}
			}
		},
		onShow(){
			this.loadData()
		},
		onLoad(options) {
			const { processInstanceId } =this.$Route.query
			this.processInstanceId = processInstanceId
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		.slot-text{
			flex-basis: 35%;
		}
		.slot-text:nth-of-type(1){
			text-align: left;
		}
		.slot-text:nth-of-type(2){
			flex-basis: 30%;
			text-align: center;
		}
		.slot-text:nth-of-type(3){
			text-align: right;
		}
	}
	.slot-text {
		flex: 1;
		font-size:14px;
		margin-right: 10px;
		
	}
	.slot-note{
		margin-top: 5rpx;
		color: #999;
		font-size:14px;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;				//溢出内容隐藏
		text-overflow: ellipsis;		//文本溢出部分用省略号表示
		display: -webkit-box;			//特别显示模式
		-webkit-line-clamp: 2;			//行数
		line-clamp: 2;					
		-webkit-box-orient: vertical;	//盒子中内容竖直排列
	}
	.uni-list-item{
		.uni-list-item__container>uni-view{
			width: 100%;
		}
	}
	.red{
		color: #f56c6c;
	}
</style>